﻿<div id="Content-Body" style="min-width:1200px;">
    <div class="toggle">
        <span class="data-fill" resource="Roles-Table-Paging">共 @Total 条数据</span>

        <button class="item active">所有角色</button>
    </div>
    <div class="tools">
        <!--<input type="button" class="button right super-search" resource="Roles-Table" value="高级搜索" />-->
        <form class="filter right" resource="Roles-Table,Roles-Table-Paging">
            <input class="left w280 input" type="text" name="[Fuzzy]Name" placeholder="搜索名称..." /><input type="submit" class="right button" value="Q" />
        </form>

        <!--<input type="button" class="tool button refresh" resource="Roles-Table" value="刷新" />-->
        <input type="button" class="tool button insert" resource="Roles-Table" frame="TempRoleFrame" command="InsertRole" value="新增" />
        <input type="button" class="tool button update" resource="Roles-Table" frame="TempRoleFrame" command="UpdateRole" value="修改" />
        <input type="button" class="tool button delete" resource="Roles-Table" command="DeleteRole" value="删除" />
    </div>
    <div class="table-box">
        <table class="table" id="Roles-Table" command="ReadPageRoles" parameters="Begin:1,End:12,DefaultOrders:'DId'">
            <thead>
                <tr>
                    <td name="selection" style="width:30px;"><input type="checkbox" /></td>
                    <td class="sort" name="Id" style="width:30px;">ID</td>
                    <td class="sort" name="Name" style="width:80px;">角色名称</td>
                    <td class="sort" name="Address" style="width:120px;">角色说明</td>
                </tr>
            </thead>
        </table>
    </div>

    <div id="Roles-Table-Paging" command="GetRolesTotal" resource="Roles-Table"></div>

    <form id="TempRoleFrame" text="角色信息" class="frame temp" onsubmit="return app.frameSubmit(this)">
        <div class="top">
            <div class="right">
                <span class="min" title="最小化"></span>
                <span class="max" title="最大化"></span>
                <span class="close" title="关闭"></span>
            </div>
            <span class="title">查看/修改角色信息</span>
        </div>
        <div class="content" readonly-where="data.Readonly">
            <div class="content">
                <span class="title">基本信息</span>
                <input type="hidden" name="Id" />
                <div class="item">
                    <label class="text">*角色名称：</label>
                    <input verify="notNull" class="input w280" type="text" name="Name" placeholder="角色名称" />
                </div>
                <div class="item">
                    <label class="text">*角色说明：</label>
                    <input verify="notNull" class="input w280" type="text" name="Address" placeholder="角色说明" />
                </div>
            </div>
            <div id="AuthorizesBox" style="white-space:nowrap; overflow:hidden;">
                <div id="AuthorizeMenus" class="content many inline-block authorize-item" field="Id" command="RolesAuthorizeMenus">
                    <span class="title">菜单授权</span>
                    <div id="AuthorizeMenusItem" class="item content-item" style="overflow:auto;display:block;padding:0;">
                        <ul id="Menus-Tree" class="tree checkbox savestate" command="ReadTreeAuthorizeMenus" menu-name="菜单 TreeView"></ul>
                    </div>
                </div><div id="AuthorizeDictionarys" class="content many inline-block authorize-item" field="Id" command="RolesAuthorizeDictionarys">
                    <span class="title">字典授权</span>
                    <div id="AuthorizeDictionarysItem" class="item content-item" style="overflow:auto;display:block;padding:0;">
                        <ul id="Dictionarys-Tree" class="tree checkbox savestate" command="ReadTreeAuthorizeDictionarys" menu-name="字典 TreeView"></ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <input type="submit" class="button" value="保存修改" display-where="!data.Readonly" />
            <input type="button" class="button close" value="返回" />
        </div>
    </form>

    <script>
        $("#TempRoleFrame").on("process", function (e, Data) {
        });

        $("#TempRoleFrame").on("apply", function (e, Data) {
            var IsInsert = $(this).attr("command").indexOf("Insert") != -1;

            if (!IsInsert && Data.IsShowApply) {
                return false;
            }

            function Resize() {
                $(this).find(".authorize-item").width(($(this).find("#AuthorizesBox").width() - 36) / 2);
                $(this).find(".content-item").height($(this).find(".content:first").height() - 180);
            }

            $(this).resize(Resize);

            Resize.apply(this);

            /* 默认授权的菜单 Id */
            var DefaultMenus = [];

            /* 菜单授权 */

            var MenusTree = $(this).find("#Menus-Tree");

            MenusTree.prop("parameters", { Id: 0, RoleId: Data.Id || 0 });

            app.control(MenusTree, "tree");

            MenusTree.on("process", function (e, Data) {
                Data.treeText = Data.Name;
                Data.treeType = Data.Type == 4 ? "node" : "dir";
                Data.treeIcon = null;

                if (IsInsert && DefaultMenus.indexOf(Data.Id) != -1) {
                    Data.IsAuthorized = true;
                }

                if (Data.IsAuthorized) {
                    Data.Checked = true;
                    Data.Expanded = true;
                }

                e.stopPropagation();
            });



            /* 字典授权 */

            var DictionarysTree = $(this).find("#Dictionarys-Tree");

            DictionarysTree.prop("parameters", { Id: "-", RoleId: Data.Id || 0 });

            app.control(DictionarysTree, "tree");

            DictionarysTree.on("process", function (e, Data) {
                Data.treeText = Data.Name;
                Data.treeType = Data.Value ? "node" : "dir";
                Data.treeIcon = null;

                if (IsInsert) {
                    /* 默认全部选中 */
                    Data.IsAuthorized = true;
                }

                if (Data.IsAuthorized) {
                    Data.Checked = true;
                    Data.Expanded = true;
                }
                if (!Data.Value) {
                    Data.Checkbox = false;
                }

                e.stopPropagation();
            });
        });

        $("#TempRoleFrame").on("show", function (e) {
            app.apply($(this), { IsShowApply: true });
        });

        $("#AuthorizeMenusItem").on("process", function (e, Data) {
            var MenusTree = $(this).find("#Menus-Tree")[0];

            var Selected = MenusTree.getSelected();

            var MenuId = "";

            $(Selected).each(function () {
                MenuId += "," + this.Id;
            });

            MenuId = MenuId.substr(1);

            Data.MenuId = MenuId;
        });

        $("#AuthorizeDictionarysItem").on("process", function (e, Data) {
            var DictionarysTree = $(this).find("#Dictionarys-Tree")[0];

            var Selected = DictionarysTree.getSelected();

            var DictionaryId = "";

            $(Selected).each(function () {
                if (!isNaN(parseInt(String(this.Id)))) {
                    DictionaryId += "," + this.Id;
                }
            });

            DictionaryId = DictionaryId.substr(1);

            Data.DictionaryId = DictionaryId;
        });


        $.extend(window, {
        });

        app.control($("#Roles-Table"), "table");
        app.control($("#Roles-Table-Paging"), "paging");
        app.control($("#Content-Body"), "content");

        throw "debug"
    </script>
</div>